<template lang="">
  <div>
    <el-table :data="tableData" style="width: 100%; height: 70vh">
      <el-table-column prop="proname" label="商品名" width="180px" />
      <el-table-column prop="originprice" label="商品价格" />
      <el-table-column prop="brand" label="品牌" />
      <el-table-column prop="category" label="商品分类" />
      <el-table-column prop="sales" label="销量" />
      <el-table-column prop="issale" label="上架">
        <!-- <template #default="scope">
          <el-switch v-model="scope.row.issale == 1 ? true : false" />
        </template> -->

        <!--  作用域插槽 把子组件内部数据 暴漏 父组件---scope  获取到了 子组件中每一行的 数据 -->
        <template #default="scope">
          <!--  -->
          <!-- active-value="1" inactive-value="0" -->
          <!-- 小问题---el-switch  服务器返回的值跟 组件需要的值不一样问题 -->
          <el-switch
            v-model="scope.row.issale"
            :active-value="1"
            :inactive-value="0"
            @change="changeIsSale(scope)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="img1" label="图片">
        <!--#default  默认插槽插入内容 -->
        <!--scope 作用域插槽--把组件内部的数据 暴漏处来  -->
        <!-- scope.row 这是 一行数据的对应的 数组的 对象  -->
        <template #default="scope">
          <el-image :src="scope.row.img1">
            <template #error>
              <div class="image-slot">
                <el-icon><Picture/></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>

      <!--  -->
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      v-model:current-page="currentPage"
      @current-change="currentChange"
    />
  </div>

  <el-dialog v-model="editFormShow">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="商品名字" required>
        <el-input v-model="form.proname" maxlength="50" clearable />
      </el-form-item>

      <el-form-item label="商品价格" required>
        <el-input v-model.number="form.originprice" type="number" />
      </el-form-item>

      <el-form-item label="商品详情" required>
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>

      <el-form-item label="是否在售" required>
        <el-switch v-model="form.issale" :active-value="1" :inactive-value="0" />
      </el-form-item>

      <el-form-item label="上传图片">
        <!-- 上传图片组件 -->
        <!-- v-model:file-list 图片数组 -->
        <!-- action 上传图片接口 -->
        <!-- list-type  图片墙类型 -->
        <!-- on-preview 预览事件 -->
        <!-- on-remove 删除事件 -->
        <el-upload
          v-model:file-list="fileList"
          action="http://localhost:3001/admin/file/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="4"
          name="img"
          :on-success="uploadSuccess"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <!-- 预览图片 -->
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="预览图片" />
        </el-dialog>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="editFormShow = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
// 引入 商品列表请求
import {
  productListReq,
  productDeleteReq,
  productUpdateReq,
  productEditReq
} from "@/api/product.js"
import { ElMessage, ElMessageBox } from "element-plus"
import _ from "lodash"
export default {
  data() {
    return {
      tableData: [],
      //控制页码
      currentPage: 1,
      // 控制每页多少条数据
      pagesize: 5,
      total: 0,

      // 控制编辑表单的显示和隐藏
      editFormShow: false,

      //图片预览控制
      dialogVisible: false,
      dialogImageUrl: "",

      //上传图片数组
      // 数组中数据 格式是固定-参照文档
      fileList: [],

      // 表单数据
      form: {
        prorname: "",
        originprice: 0,
        desc: "",
        brand: "",
        img1: "",
        img2: "",
        img3: "",
        img4: "",
        issale: 1
      }
    }
  },
  methods: {
    // 编辑表单里面的 上图图片
    handlePictureCardPreview(item) {
      this.dialogImageUrl = item.url
      this.dialogVisible = true
      console.log(item)
    },
    handleRemove() {
      console.log(this.fileList)
      console.log(this.fileList)
      console.log(this.form)
    },
    //上传图片成功的回调
    uploadSuccess(e) {
      // 服务器返回的数据
      console.log(e)
      console.log(this.fileList)
      console.log(this.form)
    },

    // 编辑按钮的点击事件
    handleEdit(index, row) {
      console.log(index)
      console.log(row) //表格里面每一行的数据
      //编辑弹框出现
      this.editFormShow = true
      // 修改form里面 内容
      // 要编辑的数据  直接 赋值form  --问题--修改表单，表格数据立刻改变（赋值 row的地址给了 this.form）
      // 解决--深拷贝
      // this.form = row
      this.form = _.cloneDeep(row)

      this.fileList = [] //每次编辑 把 fileList 重置，方式叠加以前的数据
      // 服务器返回的数 每一个商品数据 -里面的图片 img1 img2 img3 img4 属性
      // 上传图片组件--它里面是 fileList = [{url}]
      for (let i = 1; i < 4; i++) {
        let key = "img" + i //属性名
        let imgUrl = row[key]
        if (imgUrl != "") {
          //有这个图片
          this.fileList.push({ url: imgUrl })
        }
      }

      console.log(this.fileList)
    },

    onSubmit() {
      //先把 form中图片数据都清空
      for (let i = 1; i < 4; i++) {
        let key = "img" + i //属性名
        this.form[key] = ""
      }
      //需要把fileList 里面的 图片数据
      // 转化到 this.form 中 img1 img2 img3  提交给服务器
      this.fileList.forEach((v, i) => {
        console.log(v.url)
        let key = "img" + (i + 1) //img1  img2
        let url = v.url

        //给form 添加 img1 img2 img3 属性
        // fileList 里面的 使用组件新上传的图片  数组元素，里面的 url 属性是一个本地地址，不是网址，网址图在 response.fileUrl里面
        // 需要上传的是图片网址信息
        // debugger
        // 可选链
        // obj?.aa
        // 如果obj上存在aa 再使用，否者 返回 undefined
        if (v.response?.fileUrl) {
          this.form[key] = v.response.fileUrl
        } else {
          this.form[key] = url
        }
      })

      console.log("保存")
      console.log(this.form)
      productEditReq(this.form.proid, this.form).then((r) => {
        //编辑请求成功隐藏 弹框
        this.editFormShow = false
        this.loadList()
      })
    },

    currentChange(r) {
      console.log(r)
      console.log(this.currentPage)
      //根据页码发请求
      this.loadList()
    },
    async changeIsSale(scope) {
      //调用修改接口，修改 在售状态
      console.log(scope.row.issale)
      let r = await productUpdateReq(scope.row.proid, { issale: scope.row.issale })
      console.log(r.data)
    },

    handleDelete(index, row) {
      console.log(index)
      console.log(row) //当前行的数据
      ElMessageBox.confirm("确定要删除吗", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(async () => {
          //点击了确定
          let r = await productDeleteReq(row.proid)
          console.log(r.data)
          if (r.data.code == 200) {
            ElMessage({
              message: r.data.message,
              type: "success"
            })
            this.loadList()
          }
        })
        .catch(() => {
          //点击了取消
        })
    },
    loadList() {
      productListReq(this.currentPage, this.pagesize).then((r) => {
        // debugger
        console.log(r.data)
        //把请求的商品列表数据 给到表格的数据源
        this.tableData = r.data.data

        //服务返回了 总的商品数据
        this.total = r.data.total
      })
    }
  },
  // created  mounted
  mounted() {
    // 页面加载完毕，发起列表请求
    this.loadList()
  }
}
</script>
<style lang=""></style>
